<template >

  <!-- 抽屉 -->
  <a-drawer
    :title="deviceInfo"
    :width="screenWidth"
    @close="onClose"
    :visible="visible"
    :bodyStyle="bodyStyle"
    :headerStyle="headerStyle"
    wrapClassName="ant-drawer-cust-warp-test1"
  >
    <div class="drawer" style="background-color:#06264d;">
      <a-tabs :size="size" default-active-key="1" @change="callback" style="width:100%; height: 100%;" class="tabs_box">
        <!--LED屏-->
        <a-tab-pane key="1" v-if="ledList.length>0">
          <span slot="tab">
            <a-icon type="solution" />
            LED屏
          </span>
          <a-tabs  :size="size">
            <a-tab-pane :key="index" :tab="led.name" v-for="(led,index) in ledList" :style="height"  class="content_box flex_column">
              <div class="text_box flex_column">
                <span class="content_text">&nbsp;设备名称：&nbsp;<span class="color_green"   >{{led.name}}</span></span>
                <span class="content_text">&nbsp;编号：&nbsp;<span class="color_green"   >{{led.code}}</span></span>
                <span class="content_text">&nbsp;状态：&nbsp;<span class="color_green" >{{led.status=='Y'?'在线':'离线'}}</span> </span>
                <span class="content_text">&nbsp;开宽状态：&nbsp;<span class="color_green" >{{led.openStatus=='Y'?'开屏':'关屏'}} </span></span>
                <span class="content_text">&nbsp;高度：&nbsp;<span class="color_green" >{{led.height}} </span></span>
                <span class="content_text">&nbsp;宽度<span class="color_green" >：&nbsp;{{led.width}}</span> </span>
                <span class="content_text">&nbsp;亮度：&nbsp;<span class="color_green" >{{led.progress}} </span></span>
                <div class="video_show">
                  <a-button type="primary" @click="ledOpenOrClose('Y','是否开屏?',led.id)" icon="search">开屏</a-button>
                  <a-button type="primary" @click="ledOpenOrClose('N','是否关屏?',led.id)" icon="search">关屏</a-button>
                </div>
              </div>
              <div class="video_show" v-if="led.codes" style="display: flex;justify-content: center;margin-top: 10px;">
                <img  :src="led.codes">
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>

        <!--音柱-->
        <a-tab-pane key="2" v-if="radioList.length>0">
          <span slot="tab">
            <a-icon type="sound" />
            音柱
          </span>

          <a-tabs   :size="size" >
            <a-tab-pane :key="index" :tab="radio.name" v-for="(radio,index) in radioList" :style="height" class="content_box flex_column">
              <div  class="text_box flex_column">
                <span class="content_text">&nbsp;设备名称：&nbsp;<span class=" color_green"   >{{radio.name}}</span></span>
                <span class="content_text">&nbsp;状态：&nbsp;
                  <span v-if="radio.status=='Offline'" class=" color_green" >离线</span>
                  <span v-if="radio.status=='Idle'" class=" color_green" >空闲</span>
                  <span v-if="radio.status=='Working'" class=" color_green" >播放中</span>
                </span>
                <span class="content_text">&nbsp;音量：&nbsp;<span class=" color_green" >{{radio.vol}} </span></span>
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>

        <!--传感器-->
        <a-tab-pane key="3" v-if="sensorWayList.length>0">
          <span slot="tab">
            <a-icon type="deployment-unit" />
            传感器
          </span>

          <a-tabs    :size="size"  >
            <a-tab-pane :key="index" default-active-key="0" :tab="sensor.name" v-for="(sensor,index) in sensorWayList" :style="height" class="content_box flex_column" style="font-size:1.5rem">

              <div v-if="sensor.type==101" class="text_box flex_column">
              <span class="content_text">&nbsp;设备名称：&nbsp;<span class=" color_green"  >{{sensor.name}}</span></span>
              <span class="content_text">&nbsp;状态：&nbsp;<span class=" color_green"  >{{sensor.status=='Y'?'在线':'离线'}}</span></span>
              <span class="content_text">&nbsp;湿度(RH)：&nbsp;<span class=" color_green"  v-if='sensor.glrSensorData'>{{sensor.glrSensorData.humidity==null?'0':sensor.glrSensorData.humidity}}</span></span>
              <span class="content_text">&nbsp;温度(℃)：&nbsp;<span class=" color_green" v-if='sensor.glrSensorData' >{{sensor.glrSensorData.temperature==null?'0':sensor.glrSensorData.temperature}}</span></span>
              <span class="content_text">&nbsp;气压(hPa)：&nbsp;<span class=" color_green" v-if='sensor.glrSensorData' >{{sensor.glrSensorData.airpressure==null?'0':sensor.glrSensorData.airpressure}}</span></span>
              <span class="content_text">&nbsp;风速(m/s)：&nbsp;<span class=" color_green" v-if='sensor.glrSensorData' >{{sensor.glrSensorData.windSpeed==null?'0':sensor.glrSensorData.windSpeed}}</span></span>
              <span class="content_text">&nbsp;风向(deg)：&nbsp;<span class=" color_green" v-if='sensor.glrSensorData' >{{sensor.glrSensorData.windDirection==null?'0':sensor.glrSensorData.windDirection}}</span></span>
              <span class="content_text">&nbsp;光辐射强度(W/㎡)：&nbsp;<span class=" color_green" v-if='sensor.glrSensorData' >{{sensor.glrSensorData.opticalRadiation==null?'0':sensor.glrSensorData.opticalRadiation}}</span></span>
              <span class="content_text">&nbsp;紫外线强度(级)：&nbsp;<span class=" color_green" v-if='sensor.glrSensorData' >{{sensor.glrSensorData.ultravioletRay==null?'0':sensor.glrSensorData.ultravioletRay}}</span></span>
              <span class="content_text">&nbsp;噪声(分贝)：&nbsp;<span class=" color_green" v-if='sensor.glrSensorData' >{{sensor.glrSensorData.noise}}</span></span>
              <span class="content_text">&nbsp;PM2.5：&nbsp;<span class=" color_green" v-if='sensor.glrSensorData' >{{sensor.glrSensorData.pm25}}</span></span>
              <span class="content_text">&nbsp;PM10：&nbsp;<span class=" color_green" v-if='sensor.glrSensorData' >{{sensor.glrSensorData.pm10}}</span></span>

            </div>
              <div  v-if="sensor.type==102"  class="text_box flex_column">
                <span class="content_text">&nbsp;设备名称：&nbsp;<span class=" color_green"  >{{sensor.name}}</span></span>
                <span class="content_text">&nbsp;状态：&nbsp;<span class=" color_green"  >{{sensor.status=='Y'?'在线':'离线'}}</span></span>
                <span class="content_text">&nbsp;湿度(RH)：&nbsp;<span class=" color_green"  v-if='sensor.glrSensorData'>{{sensor.glrSensorData.humidity==null?'0':sensor.glrSensorData.humidity}}</span></span>
                <span class="content_text">&nbsp;温度(℃)：&nbsp;<span class=" color_green" v-if='sensor.glrSensorData' >{{sensor.glrSensorData.temperature==null?'0':sensor.glrSensorData.temperature}}</span></span>
                <span class="content_text">&nbsp;噪声(分贝)：&nbsp;<span class=" color_green" v-if='sensor.glrSensorData' >{{sensor.glrSensorData.noise}}</span></span>
                <span class="content_text">&nbsp;PM2.5：&nbsp;<span class=" color_green" v-if='sensor.glrSensorData' >{{sensor.glrSensorData.pm25}}</span></span>
                <span class="content_text">&nbsp;PM10：&nbsp;<span class=" color_green" v-if='sensor.glrSensorData' >{{sensor.glrSensorData.pm10}}</span></span>
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>

        <!--摄像头-->
        <a-tab-pane key="4" v-if="videoList.length>0">
          <span slot="tab">
            <a-icon type="eye" />
            摄像头
          </span>
          <a-tabs   :size="size"  >
            <a-tab-pane :key="index" default-active-key="0" :tab="video.name" v-for="(video,index) in videoList" :style="height" class="content_box flex_column">
              <div  class="text_box flex_column">
                <span class="content_text">&nbsp;设备名称：&nbsp;<span class=" color_green"   >{{video.name}}</span></span>
                <span class="content_text">&nbsp;编号：&nbsp;<span class=" color_green" >{{video.code}} </span></span>
                <span class="content_text">&nbsp;型号：&nbsp;<span class=" color_green" >{{video.equipmentModel}} </span></span>
                <span class="content_text">&nbsp;序列号：&nbsp;<span class=" color_green" >{{video.equipmentSerial}} </span></span>
                <span class="content_text">&nbsp;状态：&nbsp;<span class=" color_green" >{{video.equipmentStatus=='Y'?'在线':'离线'}}</span> </span>
                <span class="content_text">&nbsp;设备类型：&nbsp;<span class=" color_green" >{{video.equipmentStyleType=='10'?'球机':'枪机'}}</span> </span>
              </div>
              <div class="video_show" >
                <a-button type="primary" @click="showVideo(video)" icon="search" >预览</a-button>
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>

        <!--网关-->
        <a-tab-pane key="5" v-if="gateWayList.length>0">
          <span slot="tab">
            <a-icon type="gateway" />
            网关
          </span>
          <a-tabs   :size="size"  >
            <a-tab-pane :key="index" default-active-key="0" :tab="gateWay.gatewayName" v-for="(gateWay,index) in gateWayList" :style="height" class="content_box flex_column">
              <div class="text_box flex_column">
                <span class="content_text">&nbsp;设备名称：&nbsp;<span class=" color_green"   >{{gateWay.gatewayName}}</span></span>
                <span class="content_text">&nbsp;编号：&nbsp;<span class=" color_green" >{{gateWay.gateWayCode}} </span></span>
                <span class="content_text">&nbsp;状态：&nbsp; <span class=" color_green" >{{gateWay.currentWorkStatus=='Y'?'在线':'离线'}}</span></span>
                <span class="content_text">&nbsp;设备类型：&nbsp;<span class=" color_green" >{{gateWay.gatewayType=='1'?'市电':'其它'}}</span> </span>
                <span class="content_text">&nbsp;温度(℃)：&nbsp;<span class=" color_green" >{{gateWay.temperature}}</span> </span>
                <span class="content_text">&nbsp;湿度(℃)：&nbsp;<span class=" color_green" >{{gateWay.humidity}}</span> </span>
                <span class="content_text">&nbsp;光照度(Lux)：&nbsp;<span class=" color_green" >{{gateWay.illuminance}}</span> </span>

              </div>
              <div class="video_show">
                <a-button type="primary" @click="gateWayOpenOrClose(gateWay,'确定开灯吗？',100)" icon="search">开灯</a-button>
                <a-button type="primary"  @click="brightnessSet(gateWay)" icon="bulb">调光</a-button>
                <a-button type="primary" @click="gateWayOpenOrClose(gateWay,'确定关灯吗？',0)" icon="search">关灯</a-button>
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>

        <!--路灯-->
        <a-tab-pane key="6" v-if="lightList.length>0">
          <span slot="tab">
            <a-icon type="bulb" />
            路灯
          </span>
          <a-tabs   :size="size"  >
            <a-tab-pane :key="index" :tab="light.code" v-for="(light,index) in lightList" :style="height" class="content_box flex_column">
              <div  class="text_box flex_column">
                <span class="content_text">&nbsp;编号：&nbsp;<span class=" color_green" v-if="lightList.length>0">{{light.code}} </span></span>
                <span class="content_text">&nbsp;状态：&nbsp;
                  <span class=" color_green" v-if="lightList.length>0">
                  <span v-if="lightList[0].currentStatus=='Y'" >在线</span>
                  <span v-if="lightList[0].currentStatus=='N'" >离线</span>
                  <span v-if="lightList[0].currentStatus=='K'" >故障</span>
                  </span>
                </span>
                <span class="content_text">&nbsp;电压(V)：&nbsp;<span class=" color_green" >{{light.currentVol}}</span> </span>
                <span class="content_text">&nbsp;电流(mA)：&nbsp;<span class=" color_green" >{{light.currentCur}}</span> </span>
                <span class="content_text">&nbsp;额定功率(W)：&nbsp;<span class=" color_green" >{{light.currentApparentPower}}</span> </span>
                <span class="content_text">&nbsp;当前功率(W)：&nbsp;<span class=" color_green" >{{light.currentPower}}</span> </span>
                <span class="content_text">&nbsp;亮度(%)：&nbsp;<span class=" color_green" >{{light.currentBrightness}}</span> </span>
                <span class="content_text">&nbsp;温度(℃)：&nbsp;<span class=" color_green" >{{light.currentTemperature}}</span> </span>
              </div>
              <div class="video_show flex_row">
                <a-button type="primary" @click="lightOpenOrClose(light,'确定开灯？',100)" icon="search">开灯</a-button>

                <a-button type="primary" @click="lightOpenOrClose(light,'确定关灯？',0)" icon="search">关灯</a-button>
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>



      </a-tabs>

    </div>
    <GlrVideoShow ref="glrVideoShow"></GlrVideoShow>
    <a-modal
      :title="brightnessSetTitle"
      :visible="brightnessSetVisible"
      :confirmLoading="brightnessSetConfirmLoading"
      @ok="brightnessSetHandleOk"
      @cancel="brightnessSetHandleCancel"
      cancelText="关闭">
      <div style="width: 100%">
        亮度:<a-slider id="vol_Id" :max="maxValue" :disabled="disabledValue" :step="5" :defaultValue="0" v-model="brightnessValue"/>
      </div>
    </a-modal>
  </a-drawer>


</template>
<script>
  import {httpAction} from '@/api/manage'
  import GlrVideoShow from "./GlrVideoShow";
  export default {
    name: 'GlrDeviceShow',
    components: {
      GlrVideoShow
    },

    data () {
      return {
        description: '路灯亮度设置页面',
        brightnessSetTitle:'亮度设置',
        brightnessSetVisible:false,
        brightnessSetConfirmLoading:false,
        disabledValue:false,
        brightnessValue:0,
        maxValue:100,
        deviceInfo:'',
        isShow:false,
        visible: false,
        screenWidth: 500,
        dataSource:[],
        videoList:[],
        sensorWayList:[],
        gateWayList:[],
        lightList:[],
        ledList:[],
        radioList:[],
        curShow:0,
        imgBase64:'',
        tabBarGutter:0,
        size: 'small',
        gate_Way_Code:'',
        bodyStyle:{
          background:'#06264d',

        },
        headerStyle:{
          background:'#06264d',
          borderBottom:'1px solid #1883d1'
        },
        url: {
          getLightPoleList: "/glr/glrLightPole/getLightPoleList",
          getLightPoleDevice: "/glr/glrLightPole/getLightPoleDevice",
          getMainData: "/glr/glrHomeController/getMainData",
          getLedImgByCode: "/glr/glrLed/getLedImgByCode",
          gatawaySetBrightness: "/glr/glrLight/gatawaySetBrightness",
          lightOpenOrClose: "glr/glrLight/ledOpenOrClose",
          gateWayOpenOrClose: "glr/glrGateway/ledOpenOrClose",
            ledOpenOrClose: "glr/glrLed/ledOpenOrClose",
        },
        height:{
          height:'',
        }
      }
    },
    mounted(){
    },
    created(){
    },
    methods: {
        brightnessSet(gateWay){
            this.brightnessValue=0;
            this.gate_Way_Code=gateWay.gateWayCode;
            this.brightnessSetVisible=true;
        },
        brightnessSetHandleCancel(){
            this.brightnessValue=0;
            this.brightnessSetVisible=false;
        },
        brightnessSetHandleOk(){
            var that = this;
            that.loading = true;
            httpAction(that.url.gateWayOpenOrClose, {
                gateWayCodes: this.gate_Way_Code,
                brightValue: that.brightnessValue
            }, "post").then((res) => {
                if (res.success) {
                    that.$message.success(res.message);
                    this.brightnessValue=0;
                    this.brightnessSetVisible=false;
                } else {
                    that.$message.warning(res.message);
                }
            }).finally(() => {
                that.loading = false;
            });
        },
        checkBoxOnChange(e){
            if(e.target.checked){
                this.disabledValue=true;
                this.brightnessValue=0;
            }else{
                this.disabledValue=false;
            }
        },
        ledOpenOrClose:function(status,msg,id){
            var that=this;
            this.$confirm({
                title: "确认",
                content: msg,
                onOk: function () {
                    that.loading = true;
                    httpAction(that.url.ledOpenOrClose, {ids: id,status:status},"post").then((res) => {
                        if (res.success) {
                            that.$message.success(res.message);
                        } else {
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.loading = false;
                    });
                }
            });
        },
      onClose() {
        this.visible = false;
        this.dataSource = [];
      },
      show (id) {
        this.visible = true;
        var that=this;
        that.deviceInfo="";
        httpAction(that.url.getLightPoleDevice,{id:id},"post").then((res) => {
          if (res.success) {
            that.radioList= res.result.radioList;
            that.videoList= res.result.videoList;
            that.sensorWayList= res.result.sensorWayList;
            that.gateWayList= res.result.gateWayList;
            that.lightList= res.result.lightList;
            that.ledList= res.result.ledList;
            that.glrLightPole= res.result.glrLightPole;

            if (res.result.glrProject){
              if (res.result.glrProject.projectName){
                that.deviceInfo=""+res.result.glrProject.projectName
              }
            }

            if (res.result.glrLightPole.code){
              that.deviceInfo=that.deviceInfo+"-"+res.result.glrLightPole.code+"号灯杆";
            }

          } else {
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.loading = false;
        });

      },
      callback(key) {

      },
      showVideo(video){
        this.$refs.glrVideoShow.edit(video.equipmentUrl);
      },
      gateWayOpenOrClose(gateWay, msg, dimmingValue){
        var gateWayCodes = gateWay.gateWayCode;
        var that = this;
        this.$confirm({
          title: "确认",
          content: msg,
          onOk: function () {
            that.loading = true;
            httpAction(that.url.gateWayOpenOrClose, {
              gateWayCodes: gateWayCodes,
              brightValue: dimmingValue
            }, "post").then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.loadData();
                that.onClearSelected();
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.loading = false;
            });
          }
        });
      },
        lightOpenOrClose(lg, msg, dimmingValue){
        console.info(lg);
        var lightCode = lg.code+";"+lg.gateWayCode;
        var that = this;
        this.$confirm({
          title: "确认",
          content: msg,
          onOk: function () {
            that.loading = true;
            httpAction(that.url.lightOpenOrClose, {
              lightCode: lightCode,
              brightValue: dimmingValue
            }, "post").then((res) => {
              if (res.success) {
                that.$message.success(res.message);
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.loading = false;
            });
          }
        });

        /*
        var that=this;
        httpAction(that.url.gatawaySetBrightness,lg,"post").then((res) => {
            if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
            } else {
                that.$message.warning(res.message);
            }
        }).finally(() => {
            that.loading = false;
        });
        */

      }
    }
  }
</script>

<style scoped>
  /*侧边栏弹出*/


  .ant-tabs{
    color:#65c6e7;
    font-size:20px;
  }

  /deep/ .ant-tabs .ant-tab-pane {
    color:yellow;
  }

  .content_box{
    width:100%;
    height:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;


  }
  /*文字*/
  .text_box{
    width:70%;
    height:50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 6%;
  }


  .content_text{
    color:#65c6e7;
    width:100%;
    height:3%;
    font-size:1rem;
    margin-bottom:10%;

  }

  /*图片*/
  .video_show{
    width:70%;
    height: 50%;
    display: flex;
    justify-content:space-between;
    align-items:flex-start;
  }

  .video_show img{
    height: 100%;
    width: auto;
  }

</style>

<style>


  body{
    /*color: #0ac1c7;
    font-size:0.8rem;*/

    width:100%;
    height:100vh;
    background:url('../../assets/gisMap/pic/bg.png') no-repeat;
    background-size:cover;


  }
  ul{
    padding: 0;
  }
  .color_lightblue{
    color:#376f84;
  }
  .color_blue{
    color:#65c6e7;
  }

  .color_green{
    color:#04ba19;
  }
  .tiny{
    font-size:0.5rem;
  }

  .small{
    font-size:0.9rem;
  }
  .normal{
    font-size:1rem;
  }
  .middle{

    font-size:1.2rem;}

  .big{
    font-size:2.0rem;
  }
  .bold{
    font-weight:bold;}

  .colorful{

    width: 25%;
    font-size: 2.2rem;
    font-family: Sans-serif;
    background-image:
      -webkit-gradient( linear, left top, right top,
      color-stop(0, #03b3ff),
      color-stop(0.5, #00c8fc),
      color-stop(1, #0064fd) );
    color: transparent;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -ms-background-clip: text;
    font-weight:bold;

  }

  .italic{
    font-style:italic
  }
  /*flex布局*/
  .flex{
    display: -webkit-flex;
    display: flex;
  }
  .flex_row{
    display: -webkit-flex;
    display: flex;
    flex-direction: row ;
    justify-content:center;
    align-items:center;

  }
  .flex_column{
    display: -webkit-flex;
    display: flex;
    flex-direction: column ;
    justify-content:center;
    align-items:center;

  }

  #app{
    width:100%;
    height:100vh;

  }
  /*header部分*/
  #header{
    width:100%;
    height:15vh;
    display:flex;
    align-items:center;
    justify-content:center;

  }
  /*center部分*/
  #center{
    width:100%;
    height:56vh;
    background:url('../../assets/gisMap/pic/center_bg.png') no-repeat;
    background-repeat:no-repeat;
    background-size:100% 100%;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;

  }
  /*bottom部分*/
  #bottom{
    width:96%;
    height:25vh;
    display:flex;
    justify-content:space-between;
  }
  /*header_up部分*/
  #header_up{
    height:60%;
    width:100%;
    background:url('../../assets/gisMap/pic/header_up.png') no-repeat;
    background-size:100% 100%;
    text-align:center;
    display:flex;
    vertical-align:middle;
    justify-content:space-between;
    align-items:center;

  }
  /*标题两侧*/
  #header_up .side{

    height:100%;
    width:10%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-bottom:1%;
    cursor:pointer;
  }
  /*标题下方*/
  #header_down{
    width:96%;
    height:40%;
    display:flex;
    align-items: flex-end;
    margin-top:0.2%;
  }
  /*设备总数*/
  #header_down #exp{

    width:25%;
    height:150%;
    background:url('../../assets/gisMap/pic/left_bg.png') no-repeat;
    background-size:100% 100%;
    justify-content: flex-start ;
    align-items:center;
    alignContent:flex-start;
    /*align-self:flex-end;*/
  }
  #exp .box{
    width:100%;
    height:50%;
    display:flex;
    padding-left:15%;
    justify-content:flex-start;
    align-items:center;
  }
  /*标题下方--中间部分*/

  #header_down .down_center{

    width:50%;
    height:100%;
    background:url('../../assets/gisMap/pic/header_down.png') no-repeat;
    background-size:100% 100%;
    background-position:bottom;
  }
  /*标题下方--两侧部分*/
  #header_down .down_center .dcenter_side{
    width:33%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    vertical-align:bottom;
  }

  #header_down .down_center .dcenter_side:first-child
  {
    justify-content:flex-end;

  }
  #header_down .down_center .dcenter_side:last-child
  {
    justify-content:flex-start;
  }


  /*设备贡献值*/
  #header_down #cont{
    width:25%;
    height:160%;
    background:url('../../assets/gisMap/pic/right_bg.png') no-repeat;
    background-size:100% 80%;
    background-position:center top;
    background-repeat:no-repeat;
  }

  /*设备贡献值标题*/
  #cont .cont_up{
    text-align:right;
    padding-right:10%;
    width:80%;
    height:25%;
  }
  /*设备贡献值标题--下方*/
  #cont .cont_down{
    width:100%;
    height:70%;
  }
  /*设备贡献值标题--下方三列*/
  .cont_down .cont_box{
    width:30%;
    height:100%;
    display:flex;
    justify-content:flex-start;
    align-items:center;

  }

  .cont_box .box_pic{
    margin-top:5%;
    height:40%;
    width:auto;

  }

  .cont_box .box_text{
    height:35%;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-bottom:3%;

  }



  /*引入百度地图*/
  #allmap{
    width:95.4%;
    height:87%;
    overflow:hidden;


  }
  /*warn_box*/
  #warn_box{
    position:absolute;
    top:10%;
    left:3%;
    height:7%;
    width:18%;
    background:url('../../assets/gisMap/pic/warn_box.png') no-repeat;
    background-repeat:no-repeat;
    background-size:99.9% 99.9%;
    display:flex;
    justify-content:space-around;
    align-items:center;

  }

  #warn_box .tity_box{
    width:30%;
    height:100%;

    display:flex;
    align-items:center;
    padding-left:5%;
    color:#65c6e7;
  }


  .red_box{
    height:10px;
    width:10px;

    border-radius:5px;
    background-color:red;

  }

  .blue_box{
    height:10px;
    width:10px;

    border-radius:5px;
    background-color:blue;

  }

  .grey_box{
    height:10px;
    width:10px;

    border-radius:5px;
    background-color:grey;

  }
  /*提醒框---带箭头*/
  #arrow_box{
    color:#aab2c4;
    display: inline-block;
    height: 170px;
    width: 310px;
    text-align: center;
    border-radius: 5px;
    margin-left: 32px;
    vertical-align: top;
    background-color: #234478;
    position:absolute;
    opacity:0.8;
    text-align:left;
    visibility:hidden;

  }
  .arrow {
    width: 0px;
    height: 0px;

    border-bottom:10px solid transparent;
    border-top:10px solid #234478;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    position:absolute;
    margin-left:90px;
    margin-top:170px;


  }
  /*详细信息*/
  #arrow_box .tab_content{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top:0.1%;
    padding-left:1%;
    padding-right:1%;

    font-size:0.1rem;
    line-height:1rem;

  }
  .tab_content .tab_box{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    margin-bottom:1.5%;
    width:49%;
  }

  .lamp_pic{
    position:absolute;
    width:1%;
    height:4%;
    left:48%;
    top:70%;
    cursor:pointer;
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;

  }

  .lamp_pic ul li{
    list-style:none;

  }
  .lamp_pic img{
    width:40%;
    height:90%;

    margin-left:10%;

  }
  #lamp_pic  .lamp_logo{
    width:40%;
    height:100%;


  }
  /*图标部分*/
  .lamp_logo .red_logo{
    width:100%;
    height:18%;
    background-color:red;

  }

  .lamp_logo .green_logo{
    width:100%;
    height:18%;
    background-color:green;
  }

  .lamp_logo .blue_logo{
    width:100%;
    height:18%;
    background-color:blue;
  }

  .lamp_logo .yellow_logo{
    width:100%;
    height:18%;
    background-color:yellow;
  }

  .lamp_logo .orange_logo{
    width:100%;
    height:18%;
    background-color:orange;
  }

  .lamp_logo .purple_logo{
    width:100%;
    height:18%;
    background-color:purple;
  }



  /*bottom部分下面的bottom_box*/
  #bottom .bottom_box{
    width:24%;
    height:100%;

  }

  /*bottom_title*/
  #bottom .bottom_box .bottom_title{
    width:100%;
    height:23%;
    background:url('../../assets/gisMap/pic/bottom_title.png') no-repeat;
    background-size:100% 100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  /*bottom_title*/
  #bottom .bottom_box .bottom_title .title_box{
    width:30%;
    height:100%;
    display:flex;
    align-items:center;
    padding-left:5%;
  }
  /*bottom_content*/
  #bottom .bottom_box .bottom_content{
    width:100%;
    height:95%;
    bottom:0;
    overflow:hidden;
  }


  #sensor_title{
    width:100%;
    height:20%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .sensor_box{
    height:100%;
    width: 50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#17cde9;

  }
  #sensor_list{
    width:100%;
    height:80%;
    color:#1ae0fe;
    overflow:hidden;

  }
  #sensor_list ul{
    padding: 0;
  }
  .inner-container{
    width: 100%;
    height: 100%;

  }
  .inner-container li{
    width:100%;
    height:20%;

  }
  .inner-container  li span{

    text-align: center;
    height: 100%;
    width: 50%;
  }

  #sensor_list li:nth-child(2n+1){
    background-color:#037687;
  }
  /*传感器文字滚懂*/

  .inner-container {
    animation: myMove 5s linear infinite;
    animation-fill-mode: forwards;
  }

  /*文字无缝滚动*/
  @keyframes myMove {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(-80%);
    }
  }

  /*vue*/
  .ant-drawer{
    color:red
  }
  /*定义盒子标题颜色*/
  .ant-drawer-cust-warp-test1 .ant-drawer-title {

    color:#1883d1;
    font-size: 1.2rem;

  }

  /*定义tab标题下划线颜色*/
  .ant-drawer-cust-warp-test1 .ant-tabs-nav-container {
    border-bottom:1px solid #06264d;

  }
  /*tab标题字体*/
  .ant-drawer-cust-warp-test1 .ant-tabs-small-bar .ant-tabs-tab {
    font-size: 1.0rem;
  }

  /*整个drawer的透明度*/
  .ant-drawer-cust-warp-test1 .ant-drawer-content-wrapper{
    opacity: 0.9;
  }

  .ant-drawer-cust-warp-test1 .ant-drawer-wrapper-body{
    background-color: #06264d;
  }
  /*定义箭头的颜色*/
  .ant-drawer-cust-warp-test1 .ant-tabs-tab-prev.ant-tabs-tab-arrow-show, .ant-tabs-tab-next.ant-tabs-tab-arrow-show {
    color: #65c6e7;
  }
  /*定义X号的颜色*/
  .ant-drawer-cust-warp-test1 .ant-drawer-close {
    color: #65c6e7;
  }





</style>